<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>DOM</title>
        <script>
            // function ready() {
            //     // 通过 DOM 获得要操作的元素对象
            //     var btn = document.getElementById("btn");
            //     // 通过元素对象来更改元素的属性 这里绑定的函数直接给函数名即可
            //     btn.onclick = function () {
            //         alert("我是一个按钮思密达");
            //     };
            // }

            // 除了使用 onload 事件绑定外 还可以使用 window.onload 来绑定事件
            window.onload = function () {
                // 为 div1 绑定单击事件 让 div1 被单击时更改颜色
                var div1 = document.getElementById("div1");
                div1.onclick = function () {
                    var currentColor = this.style.backgroundColor;
                    this.style.backgroundColor = (currentColor == "yellow" ? "red" : "yellow");
                };

                // 通过 DOM 获得要操作的元素对象
                var btn = document.getElementById("btn");
                // 通过元素对象来更改元素的属性 这里绑定的函数直接给函数名即可
                btn.onclick = function () {
                    // alert("我是一个按钮思密达");
                    // 通过 DOM 来手动触发 div1 的 onclick 事件
                    div1.onclick();
                };

            };
        </script>
        <style>
            /* div 样式 */
            .div {
                width: 300px;
                height: 300px;
                background-color: yellow;
                color: green;
                margin: 5px auto;
                font-family: serif;
                font-size: 24px;
                font-weight: bold;
                border: 3px solid black;
            }
        </style>
    </head>
    <!-- onload 事件是在整个html文件全部被扫描完后才会触发 -->
    <!-- <body onload="ready()"> -->
    <body>
        <button id="btn">一个按钮</button>
        <div class="div" id="div1"></div>
    </body>
</html>
